require("../style/iconfont.css")
require("../style/icon.css")
require("./polyfill")
require("./math")
import appCssText from '../style/app.jcss'
import Utils from './utils'
import Evt from './event'
import Version from './version'
import {
	Notebook,
	Confirm,
	Theme,
	Toast,
	Zoom,
	ColorPicker
} from './paint_plugin/global-plugin'
// import Test from './paint_plugin/test.plugin'
import {MainMng,NavMng,PluginBar,LeftMng} from './layout'
import {CN,EN,Cst,Web,UI} from './config'
import PixRatio from './pix-ratio'
export default class App{
	constructor(mode){
		this.$env = new Map()
		this.$env.set("mode",mode)
		this.$event = new Evt()
		this.global = {}
		this.injectStyle()
		this.render()
		this.bind()
		let {$env,$event} = this

		this.$version = new Version($env,$event)
		if(mode==="development"){
			window.$env = $env
			window.$ver = this.$version
			window.$evt = $event
		}


		this.mng = new MainMng($env,$event,this.$version,this.global)
		this.nav = new NavMng($env,$event,this.$version)
		this.pluginBar = new PluginBar($env,$event)
		this.leftPanel = new LeftMng($env,$event,this.$version)

		this.notebook = new Notebook($event)
		this.toast = new Toast($event)

		this.global.$Confirm = 
		this.confirm = new Confirm($event)

		this.zoom = new Zoom($event)
		this.color = new ColorPicker($event)
		this.color.on(EN.action,(data)=>{
			this.mng.onColorPick(data)
		})
		
		// new Test($event)

		this.theme = new Theme($env,$event)
		this.theme.on(EN.layout_render, this.onRender.bind(this))

		PixRatio.init($event)
	}
	bind(){
		this.$event.on(EN.pixRatio,this.onPixRatio.bind(this))
		this.$event.on(EN.layout_render, this.onRender.bind(this))
		this.$event.on(EN.prerender,this.onPrerender.bind(this))
		this.$event.on(EN.action,this.onAction.bind(this))
		this.$event.on(EN.img_done,this.focusIn.bind(this))
		window.addEventListener("resize",()=>{
			this.onResize.functional(this)
		})

		document.addEventListener("keyup",(e)=>{
			if(e.keyCode==90&&e.ctrlKey){
				this.undo()
			}
		})
		document.addEventListener("fullscreenchange",(e)=>{
			this.$event.emit(EN.action,{
				action:"onfullscreenchange"
			})
		})
	}
	render(){
		let mask = this.mask = document.createDOM("div",{
			id:CN.container,
			class: `${CN.container} ${CN.layer}`
		})
		this.$env.set("$rootDom",mask)
		document.body.appendChild(mask)
	}
	injectStyle(){
		Utils.injectStyle(appCssText,UI,"geo-app")
	}
	requestFullScreen(action){
		if(action.isActive)
			document.body.requestFullscreen()
		else 
			document.webkitCancelFullScreen()
	}
	ColorPicker(nav,d){
		this.color.focusIn(d)
	}
	onRender(dom){
		document.query("#"+dom.id)||this.mask.appendChild(dom)
	}
	onPrerender(dom){
		document.query("#"+dom.id)||this.mask.insertBefore(dom,this.mask.firstElementChild)	
	}
	onAction(nav,d){
		if(this[nav.action])
			this[nav.action](nav,d)
	}
	onResize(e){
		this.$event.emit(EN.resize,document.pageRect())
	}
	onPixRatio(pr){
		// pr=pr||window.devicePixelRatio
		// console.log("devicePixelRatio",pr)
		// let {width,height} = document.pageRect()
		// this.mask.style.cssText = `
		// width:${width}px;
		// height:${height}px;
		// zoom:${pr}
		// `
	}
	undo(){
		this.$version.pop()
	}
	beforeImagePick(){
		this.focusOut()
	}
	powerOff(){
		this.$version.clear()
		let cfd = this.$env.get(Cst.CacheFuncData)
		let cfdg = this.$env.get(Cst.CacheFuncDataGhost)
		cfd&&cfd.clear()
		cfdg&&cfdg.clear()
		let theme = this.$env.get(Cst.themeClass)
		document.documentElement.classList.remove(Web.geo)
		document.documentElement.classList.remove(theme)
		this.focusOut()
	}
	forbidScroll(e){
		e.preventDefault()
		e.stopPropagation()
		return false
	}
	//forbid boolean
	bindScroll(forbid){
		let type = forbid?"addEventListener":"removeEventListener"
		window[type]("scroll",this.forbidScroll,false)
		window[type]("DOMMouseScroll",this.forbidScroll,false)
		window[type]("mousewheel",this.forbidScroll,{ passive: false })
	}
	focusOut(){
		document.documentElement.classList.remove(CN.noscroll)
		// this.bindScroll(false)
		this.mask.classList.remove(CN.show)
	}
	focusIn(){
		let theme = this.$env.get(Cst.themeClass)
		document.documentElement.classList.add(CN.noscroll)
		document.documentElement.classList.add(Web.geo)
		document.documentElement.classList.add(theme)
		// this.bindScroll(true)
		this.mask.classList.add(CN.show)
		//解决滚动条的影响
		setTimeout(()=>{
			this.$event.emit(EN.resize,document.pageRect())
		})
	}
	onToggleScroll(){
		document.documentElement.classList.toggle(CN.noscroll)
	}
}